import './App.css'
import React from 'react'
import { v4 as uuid } from 'uuid'

import avatar from './logo.jpg'

class Demo extends React.Component {
  // 初始数据
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot', // 控制Tab激活状态
    comment: '', // 当前评论状态
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      }
    ]
  }
  // 处理时间格式
  formatTime = (time) => `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`

  // 改变tab标签
  changeTab = (type) => {
    this.setState({
      active: type
    })
  }

  // 改变添加评论输入框
  textAreaChange = (e) => {
    this.setState({
      comment: e.target.value
    })
  }

  // 添加评论
  addComment = () => {
    this.setState({
      list: [
        ...this.state.list,
        {
          id: uuid(), // 独一无二的值
          author: '周杰伦',
          comment: this.state.comment,
          time: new Date(),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0
        }
      ]
    })
  }

  // 删除评论
  deleteComment = (id) => {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }

  // 点赞 | 点踩
  actionChange = (object, type) => {
    const { attitude, id } = object
    this.setState({
      list: this.state.list.map(item => {
        if (item.id === id) {
          switch (type) {
            case 'hate':
              item.attitude = attitude === -1 ? 0 : -1
              break
            case 'like':
              item.attitude = attitude === 1 ? 0 : 1
              break
            default:
              item.attitude = 0
              break
          }
        }
        return item
      })
    })
  }

  render () {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>5 评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {this.state.tabs.map(item => (
                <li
                  key={item.id}
                  className={item.type === this.state.active ? 'on' : ''}
                  onClick={() => this.changeTab(item.type)}
                >按{item.name}排序</li>
              ))}
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.comment}
                onChange={this.textAreaChange}
              />
              <button className="comment-submit" onClick={this.addComment}>发表评论</button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {this.state.list.map(item => (
              <div key={item.id} className="list-item">
                <div className="user-face">
                  <img className="user-head" src={avatar} alt="" />
                </div>
                <div className="comment">
                  <div className="user">{item.author}</div>
                  <p className="text">{item.comment}</p>
                  <div className="info">
                    <span className="time">{this.formatTime(item.time)}</span>
                    <span className={item.attitude === 1 ? 'like liked' : 'like'} onClick={() => this.actionChange(item, 'like')}>
                      <i className="icon" />
                    </span>
                    <span className={item.attitude === -1 ? 'hate hated' : 'hate'} onClick={() => this.actionChange(item, 'hate')}>
                      <i className="icon" />
                    </span>
                    <span className="reply btn-hover" onClick={() => this.deleteComment(item.id)}>删除</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
}

export default Demo
